<template>
	<div class="test-index">
		<v-chart autoresize :option="option" style="height: 100%" />
	</div>
</template>

<script>
	export default {
		props: {
			chartData: {
				type: Object,
				default(){
					return {}
				}
			},
		},
		data() {
			return {
				option: {
					//  backgroundColor: '#00265f',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '0%',
						top: '10px',
						right: '0%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['小学组', '中学组', '高中组'],
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(0,0,0,.1)",
								width: 1,
								type: "solid"
							},
						},

						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							rotate: 45,
							show: true,
							splitNumber: 15,
							textStyle: {
								color: 'rgba(0,0,0,.5)',
								fontSize: '14',
							},
						},
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							//formatter: '{value} %'
							show: true,
							textStyle: {
								color: 'rgba(0,0,0,.5)',
								fontSize: '14',
							},
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(0,0,0,.1)",
								width: 1,
								type: "solid"
							},
						},
						splitLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)",
							}
						}
					}],
					series: [{
							type: 'bar',
							data: [1500, 1200, 600, 200, 300, 300, 900],
							barWidth: '35%', //柱子宽度
							// barGap: 1, //柱子之间间距
							itemStyle: {
								normal: {
									color: '#27d08a',
									opacity: 1,
									barBorderRadius: 5,
								}
							}
						}

					]
				}
			}
		},
		mounted() {

		},
		watch: {
			chartData: {
				deep: true,
				immediate: true,
				handler(val) {
					this.setData(val)
				}
			}
		},
		methods: {
			setData({
				xData,
				yData
			} = {}) {
				console.log("chartData", xData,yData)
				this.option.xAxis[0].data = xData
				this.option.series[0].data = yData
			}
		},
	}
</script>

<style lang="scss">
	.test-index {
		width: 100%;
		height: 100%;
	}
</style>